<template>
  <div class="allorderlist">
    <van-nav-bar title="订单列表" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model="active" color="#0A589B" title-active-color="#0A589B">
      <van-tab title="已支付" to="/AllOrderList/payorder" :payLists="payLists">
      </van-tab>
      <van-tab title="待支付" to="/AllOrderList/nopayorder"> </van-tab>
      <router-view
        v-if="payLists"
        :nopayLists="nopayLists"
        :payLists="payLists"
      ></router-view>
    </van-tabs>
  </div>
</template>

<script>
//引入获取所有订单接口
import { reqGetAllOrder } from "../../api/order";
export default {
  data() {
    return {
      active: 2,
      per: 30,
      page: 1,
      payLists: [],
      nopayLists: [],
    };
  },
  methods: {
    //获取所有的订单
    // async reqGetAllOrderList() {
    //   const result = await reqGetAllOrder({ per: this.per, page: this.page });
    //   //对拿到的订单进行循环遍历，判断是否支付 已经支付就传参到已经支付订单的列表的子路由，没有就传到没有支付订单的子路由
    //   result.orders.forEach((order) => {
    //     if (order.isPayed === true) {
    //       this.payLists.push(order);
    //       console.log(111, this.payLists);
    //     } else {
    //       this.nopayLists.push(order);
    //     }
    //   });
    //   //将拿到的已支付 未支付的订单数据传参到对应的页面
    // },
    reqGetAllOrderList() {
      reqGetAllOrder({ per: this.per, page: this.page }).then((result) => {
        //对拿到的订单进行循环遍历，判断是否支付 已经支付就传参到已经支付订单的列表的子路由，没有就传到没有支付订单的子路由
        result.orders.forEach((order) => {
          if (order.isPayed === true) {
            this.payLists.push(order);
            console.log(111, this.payLists);
          } else {
            this.nopayLists.push(order);
          }
        });
        //将拿到的已支付 未支付的订单数据传参到对应的页面
      });
    },
    onClickLeft() {
      this.$router.push("/mine");
    },
    delOrderinfo(value) {
      this.nopayLists = value;
    },
  },
  created() {
    this.reqGetAllOrderList();
  },
};
</script>

<style></style>
